/**
 * 模型中心 - 标注数据集弹框 - 选择数据集弹框
 */
import React, { Component, createContext } from 'react'
import { Table, Input, Button, Modal, Tag, Popover } from 'antd';
import styles from '@/pages/algorithmModel/dataCenter/style.less';
import { addMarkedDataset } from '@/services/modelCenter';
import { getDataPurpose, getDataSetList, } from '@/services/dataCenter';

const bondStyle = {
    fontWeight: 700,
    marginTop: 5
}
const { Search } = Input;
class SelectDataSet extends Component {
    constructor(props) {
        super(props);
        const { modelId, modelType } = this.props;
        this.state = {
            // 表格数据源
            dataList: [],
            // 选中的数据
            selectedRowKeys: [],
            loading: false,
            // 模型类型
            modelType,
            // 模型列表 从后端获取
            modelList: [],
            // 模型id
            modelId,
            // 已选择的训练文档数目
            selected:0,
        };
    }

    componentDidMount() {
        getDataPurpose({ commonType: 'model_purpose' }).then(rs => {
            if (rs.retCode === '0') {
                this.setState({ modelList: rs.data })
            }
        });

        this.queryDataSet()
    }

    // 获取数据集列表
    queryDataSet(dataSetName) {
        const { modelType, modelId } = this.state;
        let purpose = -2;
        if (modelType !== 0) {
            purpose = modelType;
        }
        getDataSetList({ pageNum: 0, pageSize: 0, data: { dataSetName, dataSetStatus: 1, purpose, usedInModelId: modelId } }).then(rs => {
            if (rs.retCode - 0 === 0) {
                this.setState({ dataList: rs.data.list })
            }
        })
    }

    // 查询数据集列表
    onDataSetSearch(val) {
        this.queryDataSet(val);
    }

    // 提交选中数据集
    submitDataset() {
        const { selectedRowKeys, modelId, loading } = this.state;
        this.setState({ loading: true });
        let modelDatasetUsedVOS = [];
        for (let i = 0; i < selectedRowKeys.length; i += 1) {
            let obj = {}
            obj.datasetId = selectedRowKeys[i];
            modelDatasetUsedVOS.push(obj)
        }
        addMarkedDataset({ modelId, modelDatasetUsedVOS }).then(res => {
            if (res.retCode === '0') {
                this.props.parent.addDataSet(false);
                this.props.parent.onSearchMarkedList();
            } else {
                this.setState({ loading: false })
            }
        })
    }

    // 标注数据集弹框 标签内容
    labelContent(text, record) {
        let content = <div style={{ maxWidth: 400, maxHeight: 200, overflow: 'auto' }}>
            <div style={bondStyle}> 实体标签:</div>
            <div>
                {
                    record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 0).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
                }
            </div>
            {record.purpose === 1 && <><div style={bondStyle}> 关系：</div>
                <div>
                    {
                        record.relationLabelVOList && record.relationLabelVOList.map(item => <div style={{ marginTop: 8 }}>{`${item.labelRelationName} : ${item.labelFromName} ->${item.labelToName}`} </div>)
                    }
                </div></>}
            {record.purpose === 4 && <><div style={bondStyle}> 属性标签:</div>
                <div>
                    {
                        record.objectLabelVOList && record.objectLabelVOList.filter(val => val.labelType === 1).map((item, index) => <Tag style={{ marginTop: 8 }}>{item.labelName}</Tag>)
                    }
                </div>
                <div style={bondStyle}> 实体属性:</div>
                <div>
                    {
                        record.relationLabelVOList && record.relationLabelVOList.map(item => <div style={{ marginTop: 8 }}>{`${item.labelRelationName} : ${item.labelFromName} ->${item.labelToName}`} </div>)
                    }
                </div></>
            }
        </div>
        return record.purpose === 3 ? 1 :
            <Popover content={content}><span style={{ color: '#29CCB1' }}>{record.purpose === 3 ? 1 : (record.objectLabelVOList && record.objectLabelVOList.length)}</span></Popover>;
    }


    render() {
        const { loading, dataList, selectedRowKeys, modelList,selected } = this.state;
        const { visible } = this.props;

        const columns = [
            { title: '数据集名称', dataIndex: 'dataSetName', key: 'dataSetName' },
            {
                title: '数据用途', dataIndex: 'purpose', key: 'purpose', render: record => {
                    const val = modelList.filter(model => record - 0 === model.commonValue - 0)[0];
                    // eslint-disable-next-line max-len
                    return val && val.commonName
                },
            },
            {
                title: '标签', dataIndex: 'objectLabelVOList', key: 'objectLabelVOList', width: 100,
                render: (text, record) => this.labelContent(text, record),
            },
            { title: '创建时间', dataIndex: 'createTimeShort', key: 'createTimeShort' },
        ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                let num=0;
                selectedRows.map(val=>num+=val.segmentNum)
                this.setState({ selectedRowKeys, selectedRows ,selected:num});
            },
            selectedRowKeys,
        };

        return (
            <Modal
                title={'选择标注数据集'}
                maskClosable={false}
                width={'40%'}
                visible={visible}
                onCancel={() => this.props.parent.addDataSet(false)}
                footer={[
                    <span style={{ position: "absolute",left:20,color: 'rgba(135, 149, 161, 1)'}}>共选择了{selected}篇训练文档</span>,
                    <Button key="cancel" onClick={() => this.props.parent.addDataSet(false)}>取消</Button>,
                    <Button disabled={selectedRowKeys.length > 0 ? false : true} key="primary" type='primary' loading={loading} onClick={this.submitDataset.bind(this)}>确定</Button>
                ]}
            >
                <Search placeholder="数据集名称" onSearch={value => this.onDataSetSearch(value)} style={{ width: 200, marginBottom: 16 }} />
                <Table rowSelection={rowSelection} columns={columns} dataSource={dataList} size='small' rowKey={record => record.dataSetId}
                    pagination={{ pageSize: 5}}
                />
            </Modal>
        )
    }
}

export default SelectDataSet;
